<template>
  <div>
    <router-view />

    <!-- 导航nav -->
    <van-nav-bar title="首页" left-text="城市" class="bar">
      <template #title>
        <div class="title">
          首页
          <div></div>
        </div>
      </template>
      <template #left>
        <van-icon name="location-o" color="#e4cd88" />
        <router-link
          tag="div"
          active-class="active"
          :to="{ name: 'city' }"
          class="left"
          >{{ cityname }}</router-link
        >
      </template>
      <template #right>
        <div class="right">
          <div class="circle">
            <!-- <div class="iconfont icon-sangedian-copy"></div>|<div class="iconfont icon-quan"></div> -->
            <img src="../../assets/img/loge.png" alt="" />
          </div>
        </div>
      </template>
      <router-view></router-view>
    </van-nav-bar>
    <!-- banner图 -->
    <!-- 绿色 -->
    <div
      class="wrapper"
      ref="wrapper"
      :style="{ overflow: 'auto', height: height + 'px' }"
    >
      <div class="container">
        <div class="banner">
          <!-- <img src="../../assets/img/banner4.jpg" alt="" /> -->
          <!-- 包裹 -->

          <div class="swiper-container" ref="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner4.jpg')" />
              </div>
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner5.jpg')" />
              </div>
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner8.jpg')" />
              </div>
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner10.jpg')" />
              </div>
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner14.jpg')" />
              </div>
              <div class="swiper-slide">
                <img v-lazy="require('../../assets/img/banner15.jpg')" />
              </div>
            </div>
          </div>
        </div>
        <!-- <router-view></router-view> -->
        <!-- menu菜单 -->
        <div class="menu">
          <div class="menu1">
            <router-link
              tag="div"
              active-class="active"
              :to="{ name: 'order' }"
            >
              <div class="iconfont icon-meishi4"></div>
              扫码点餐
            </router-link>
          </div>
          <div class="menu2">
            <router-link
              tag="div"
              active-class="active"
              :to="{ name: 'appointment' }"
              ><span><div class="iconfont icon-yuyuetixing"></div></span
              >餐桌预约</router-link
            >
          </div>
        </div>
        <!-- <router-link tag="li" :to="{ name: 'confirmOrder'}">confirmOrder</router-link> -->
        <!-- 上下文分割 -->
        <div
          style="
            height: 12px;
            width: 100%;
            background: #f1f1f1;
            float: right;
            margin-top: 20px;
          "
        ></div>
        <!-- 今日推荐 -->
        <div class="recommend">
          <div class="today">
            今日推荐
            <router-link tag="span" :to="{ name: 'aboutmine' }"
              >关于我们</router-link
            >
          </div>
          <MySwiper :preview="2">
            <router-link
              tag="div"
              :to="{ name: 'order' }"
              class="swiper-slide"
              style="width: 170px"
            >
              <img
                style="width: 140px; height: 110px"
                v-lazy="require('../../assets/img/banner11.jpg')"
                alt=""
              />
              <p>新西兰小牛排</p>
            </router-link>
            <router-link
              tag="div"
              :to="{ name: 'order' }"
              class="swiper-slide"
              style="width: 170px"
            >
              <img
                style="width: 140px; height: 110px"
                v-lazy="require('../../assets/img/banner14.jpg')"
                alt=""
              />
              <p>美颜养生沙拉</p>
            </router-link>
            <router-link
              tag="div"
              :to="{ name: 'order' }"
              class="swiper-slide"
              style="width: 170px"
            >
              <img
                style="width: 140px; height: 110px"
                v-lazy="require('../../assets/img/banner.jpg')"
                alt=""
              />
              <p>ins风下午茶</p>
            </router-link>
            <router-link
              tag="div"
              :to="{ name: 'order' }"
              class="swiper-slide"
              style="width: 170px"
            >
              <img
                style="width: 140px; height: 110px"
                v-lazy="require('../../assets/img/banner9.jpg')"
                alt=""
              />
              <p>多彩缤纷披萨</p>
            </router-link>
            <router-link
              tag="div"
              :to="{ name: 'order' }"
              class="swiper-slide"
              style="width: 170px"
            >
              <img
                style="width: 140px; height: 110px"
                v-lazy="require('../../assets/img/banner16.jpg')"
                alt=""
              />
              <p>提拉米苏慕斯</p>
            </router-link>
            <div style="font-size: 11px; color: #830404">我也是有底线的</div>
          </MySwiper>
        </div>
        <!-- 上下文分割 -->
        <div
          style="
            height: 12px;
            width: 100%;
            background: #f1f1f1;
            float: right;
            margin-top: 20px;
          "
        ></div>
        <!-- 最新菜品 -->
        <div class="thenew">
          <div>最新单品</div>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine5.jpg')" />
            <p class="tit">绝味阳澄湖大闸蟹</p>
            <p>价格：<i>￥198</i>/份</p>
            <p>产地：阳澄湖</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine1.jpg')" />
            <p class="tit">精致蓝莓蛋挞</p>
            <p>价格：<i>￥4</i>/份</p>
            <p>原料：蓝莓、牛奶、鸡蛋</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine2.jpg')" />
            <p class="tit">抹茶毛巾卷卷</p>
            <p>价格：<i>￥9</i>/份</p>
            <p>原料：面粉、抹茶粉、奶油</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine3.jpg')" />
            <p class="tit">九宫格爆辣火锅</p>
            <p>价格：<i>￥298</i>/份</p>
            <p>鲜香刮辣、辣星人最爱</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine4.jpg')" />
            <p class="tit">生日卡粗蛋糕</p>
            <p>价格：<i>￥168</i>/份</p>
            <p>生气快乐呀~</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine6.jpg')" />
            <p class="tit">高端大气上档次小面</p>
            <p>价格：<i>￥19</i>/份</p>
            <p>产地：重庆</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine7.jpg')" />
            <p class="tit">东北大烤串</p>
            <p>价格：<i>￥98</i>/份</p>
            <p>撸串去呀~</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine8.jpg')" />
            <p class="tit">奥尔良小鸡腿儿</p>
            <p>价格：<i>￥18</i>/份</p>
            <p>新鲜小鸡腿酿烤制成</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link tag="div" :to="{ name: 'order' }" class="cuisine">
            <img v-lazy="require('../../assets/img/cuisine12.jpg')" />
            <p class="tit">团圆饺子</p>
            <p>价格：<i>￥38</i>/份</p>
            <p>(๑•̀ㅂ•́)و✧~</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <router-link
            tag="div"
            :to="{ name: 'order' }"
            class="cuisine lasyItem"
          >
            <img v-lazy="require('../../assets/img/cuisine11.jpg')" />
            <p class="tit">集美下午茶</p>
            <p>价格：<i>￥58</i>/份</p>
            <p>快和小姐妹约起来呀</p>
            <p>
              点赞指数：
              <van-rate
                v-model="value"
                :size="13"
                color="#ffd21e"
                void-icon="star"
                void-color="##7a7878"
              />
            </p>
          </router-link>
          <!-- 包裹 -->
        </div>
        <!-- </div> -->
        <!-- 绿色结尾 -->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { NavBar } from "vant";
Vue.use(NavBar);

import { Toast } from "vant";

import "@/assets/iconfont/iconfont.css";

// 引入swiper支持的css
import "swiper/swiper-bundle.min.css";

// 引入js
import Swiper from "swiper";
// 引入myswiper
import MySwiper from "../../components/MySwiper";

// 引入点赞
import { Rate } from "vant";
Vue.use(Rate);
// icon
import { Icon } from "vant";
Vue.use(Icon);
// 滚动
import BScroll from "better-scroll";

export default {
  data() {
    return {
      // 4、添加是否吸顶标识 true吸顶，false固定
      // isFixed: false,
      mySwiper: null,
      value: 5,
      cityname: this.$store.state.city || "城市",
      bs: null,
      height: 500,
    };
  },
  components: {
    MySwiper,
  },
  mounted() {
     let h = document.documentElement.clientHeight - 120;
    this.height = h;
    this.$nextTick(() => {
      this.mySwiper = new Swiper(this.$refs["swiper-container"], {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // slidesPerView: 4,
      });
    });
    this.$nextTick(() => {
      this.bs = new BScroll(this.$refs["wrapper"], {
        // 默认better-scroll会让click事件不生效，需要开启
        click: true,
        // 解决移动站点中300ms的延时点击问题
        // tap: "tap",
        // 滚动事件触发时机
        probeType: 1,
        // 拖动到底部配置
        pullUpLoad: true,
        // 下拉配置选项
        pullDownRefresh: true,
      });
    });
  },
  methods: {
    // onClickLeft() {
    //   Toast('返回');
    // },
    // onClickRight() {
    //   Toast('按钮');
    // },
  },

  beforeDestroy() {
    this.mySwiper = null;
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
// 导航nav
.van-nav-bar__text {
  color: yellow !important;
}
// 导航

.bar {
  background-color: #830404;
  // background-color:#750000;
  &:after {
    border-bottom: 0;
  }
  .right {
    .circle {
      border-radius: 50%;
      background-color: #e4cd88;
      height: 37px;
      width: 37px;
      position: relative;
      img {
        height: 35px;
        width: 35px;
        position: absolute;
        top: 3px;
        right: 1px;
      }
    }
  }
  .left {
    font-size: 16px;
    color: #e4cd88;
  }
  .title {
    color: #e4cd88;
  }
}
.container {
    overflow: hidden;
    // margin-bottom:5px ;
  }
// banner图
.banner {
  width: 100%;
  //  position: relative;
  // height: 660px;

  // img {
  //   width: 100%;
  //   vertical-align: middle;
  // }
  .swiper-container {
    width: 100%;
    height: 230px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 菜单1
.menu {
  display: flex;
  justify-content: space-around;

  .menu1,
  .menu2 {
    float: left;
    width: 160px;
    height: 80px;
    border: 1px solid #1a2701;

    box-shadow: 1px 1px 6px #1a2701;
    margin-top: 12px;
    text-align: center;
    color: #830404;
    &:active {
      background-color: #830404;
      color: #1a2701;
    }
    .iconfont {
      // width: 40px;
      // height: 40px;
      font-size: 40px;
      font-weight: 600;
      color: #e4cd88;
      text-align: center;
      margin-top: 5px;
    }
  }
}
// 今日推荐
.recommend {
  margin: 0 auto;
  width: calc(100% - 30px);
  clear: both;
  .today {
    color: #830404;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    // height:68px;

    span {
      float: right;
      font-size: 14px;
      line-height: 36px;
    }
  }
  .swiper-slide {
    position: relative;
  }
  // .tu{
  //   position: relative;

  // }
  img {
    margin: 0 auto;
    display: block;
    // position: absolute;
  }
  p {
    height: 20px;
    font-size: 14px;
    width: 140px;
    color: #fff;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 90px;
    left: 16px;
    background: rgba($color: rgb(140, 139, 139), $alpha: 0.5);
  }
}
// 最新菜品
.thenew {
  height: 200px;
  margin: 0 auto;
  width: calc(100% - 30px);
  // background-color:rosybrown;
  div:nth-child(1) {
    color: #830404;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    height: 68px;
  }
  .cuisine {
    width: 100%;
    height: 100px;
    background-color: #fbfbfb;
    margin-bottom: 10px;
    background-image: url(../../assets/img/back3.jpg);
    background-repeat: no-repeat;
    background-size: 90px 100px;
    background-position: 260px 0px;

    p {
      font-size: 14px;
      color: rgb(122, 120, 120);
      line-height: 23px;
    }
    .tit {
      margin: 0;
      color: #454444;
      font-size: 16px;
      line-height: 30px;
      font-weight: 600px;
    }
    &:nth-last-of-type(1) {
      padding-bottom: 80px;
    }
  }
  img {
    width: 130px;
    height: 100px;
    float: left;
    margin-right: 10px;
  }
}
.swiper-wrapper {
  font-size: 12px;
}
</style>
